<template>
    <div class="private-file-wrapper">
        <div class="layout-title-wrapper">
            <file-upload :show-upload="true" @onupload="onupload"></file-upload>
        </div>
        <transition name="back-nav">
            <div class="back-nav" ref="backnav">
                <span style="cursor: pointer" @click="backnav">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24" style="fill: #101010;">
                       <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
                    </svg>
                </span>
            </div>
        </transition>
        <div class="private-wrapper">
            <ul class="layout-grid-wrapper" ref="watchfile">
                <li class="grid-item"
                    v-for="item in userFileLiist" :key="item.id"
                    v-down-url="item.httpUrl"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="120" height="120" style="fill: #101010;">
                        <path d="M527.943 224H480v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h400a48.001 48.001 0 0 0 40.704-22.56l79.942-128c19.948-31.917-3.038-73.44-40.703-73.44zM54 112h134.118l64 64H426a6 6 0 0 1 6 6v42H152a48 48 0 0 0-41.098 23.202L48 351.449V117.993A5.993 5.993 0 0 1 54 112zm394 288H72l77.234-128H528l-80 128z"></path>
                    </svg>
                    <span class="file-name">{{item.oldName || '暂无信息'}}</span>
                </li>
                <li class="grid-item grid-item-add" @click="onupload">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="74" height="74" style="fill: #101010;">
                        <path d="M29.714 15.086h-12.8v-12.8h-2.286v12.8h-12.57v2.286h12.571v12.57h2.286v-12.57h12.8z"></path>
                    </svg>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import FileUpload from "../../base/file-upload/FileUpload";
    import { getMyFileList } from "../../api/file";
    import { ERROR_NO } from "../../util/config";
    export default {
        data () {
            return {
                userFileLiist: []
            }
        },
        methods: {
            backnav () {
                this.$router.back()
            },
            onupload () {
               this.$router.push({
                   path: '/file/upload',
                   query: {
                       path: 'private',
                       ...this.$route.query,
                   }
               })
            },
            _getMyFileList (id) {
                getMyFileList(id).then(res => {
                   if (res.code === ERROR_NO) {
                       console.log(res)
                       this.userFileLiist = res.data.folderAndFile.fileList
                   }
                })
            }
        },
        created () {
            const id = this.$route.query.folderId
            this._getMyFileList(id)
        },
        components: {
            FileUpload
        }
    }
</script>

<style scoped lang="scss">
    @import './src/common/scss/variable';
    @import './src/common/scss/mixin';
  .private-file-wrapper {
      .back-nav-enter-active, .back-nav-leave-active {
          transition: opacity .5s;
      }
      .back-nav-enter, .back-nav-leave-to {
          opacity: 1;
      }
      .back-nav {
          width: 100%;
          height: 78px;
          padding-left: 40px;
          margin-top: 24px;
          line-height: 90px;
          border-radius: 20px;
          box-sizing: border-box;
          border: 1px solid $border-color;
          box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
          transition: all 250ms;
          &:hover {
              opacity: .95;
              transform: translateY(7px);
              box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
          }
      }
      .private-wrapper {
          min-height: 100vh;
          .layout-grid-wrapper {
              margin: 24px auto;
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              grid-column-gap: 51px;
              grid-row-gap: 40px;
              grid-auto-flow: row dense;
              transition: all 500ms;
              .grid-item {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  height: 190px;
                  border-radius: 20px;
                  color: $color-font;
                  font-size: 14px;
                  border: 1px solid $border-color;
                  overflow: hidden;
                  cursor: pointer;
                  box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
                  transition: all 250ms;
                  &:hover {
                      opacity: .95;
                      transform: translateY(7px);
                      box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
                  }
                  .file-name {
                      @include no-wrap();
                      width: 100%;
                      padding: 0 10px;
                      text-align: center;
                      box-sizing: border-box;
                      line-height: 30px;
                      color: $color-font;
                      font-size: 20px;
                      &:hover {
                          color: #0099ff;
                      }
                  }
              }
          }
      }
  }
</style>
